import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import { Bot, PackageSearch, ClipboardList } from 'lucide-react';
import { SystemPage } from './pages/SystemPage';
import { DispenserPage } from './pages/DispenserPage';
import { RecordsPage } from './pages/RecordsPage';

import Test from './pages/testSocket';
import TestSockJS from './pages/testSockJS';
import SendOrder from './pages/testHttp';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/system" element={<SystemPage />} />
        <Route path="/dispenser" element={<DispenserPage />} />
        <Route path="/records" element={<RecordsPage />} />
{/* test */}
        <Route path="/test" element={<Test />} />
        <Route path="/testJS" element={<TestSockJS />} />
        <Route path="/testHttp" element={<SendOrder/>}/>

      </Routes>
    </BrowserRouter>
  );
}

function HomePage() {
  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <div className="max-w-4xl w-full mx-auto p-6">
        <h1 className="text-4xl font-bold text-center mb-12">药房智能药品分发系统</h1>
        
        <div className="grid grid-cols-3 gap-6">
          <Link
            to="/system"
            className="flex flex-col items-center p-8 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow"
          >
            <Bot size={48} className="text-blue-500 mb-4" />
            <h2 className="text-xl font-semibold">系统控制台</h2>
            <p className="text-gray-500 text-center mt-2">
              控制机器人、监控系统状态
            </p>
          </Link>

          <Link
            to="/dispenser"
            className="flex flex-col items-center p-8 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow"
          >
            <PackageSearch size={48} className="text-green-500 mb-4" />
            <h2 className="text-xl font-semibold">智能发药机</h2>
            <p className="text-gray-500 text-center mt-2">
              管理药品配送、处理订单
            </p>
          </Link>

          <Link
            to="/records"
            className="flex flex-col items-center p-8 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow"
          >
            <ClipboardList size={48} className="text-purple-500 mb-4" />
            <h2 className="text-xl font-semibold">配送记录</h2>
            <p className="text-gray-500 text-center mt-2">
              查询历史配送记录
            </p>
          </Link>

{/* test */}
          {/* <Link 
            to="/test"
            className='flex flex-col items-center p-8 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow'
          >
            <h2 className="text-xl font-semibold">testSocket</h2>
            <p className="text-gray-500 text-center mt-2">
              test
            </p>
          </Link>

          <Link 
            to="/testJS"
            className='flex flex-col items-center p-8 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow'
          >
            <h2 className="text-xl font-semibold">testJS</h2>
            <p className="text-gray-500 text-center mt-2">
              test
            </p>
          </Link>
          <Link 
            to="/testHttp"
            className='flex flex-col items-center p-8 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow'
          >
            <h2 className="text-xl font-semibold">testHttp</h2>
            <p className="text-gray-500 text-center mt-2">
              test
            </p>
          </Link> */}
        </div>
      </div>
    </div>
  );
}

export default App;